<template>
  
  <van-list  :loading="loading" :finished="finished" finished-text="没有更多了" :offset="20" @load="onLoad">
    <div class="list-box">
      <ul class="left-box">
        <li class="goods-box" v-for="item in oddList" :key="item.proid">
          <van-image class="img" :src="item.img1" >
            <!-- <template v-slot:error>加载失败</template> -->
          </van-image>
          <p class="van-multi-ellipsis--l2 pname">{{ item.proname}}</p>
          <p>¥{{item.originprice}}</p>
          <van-button type="primary" @click="addCart(item.proid)">加入购物车</van-button>
        </li>
      </ul>
      <ul class="right-box">
        <li class="goods-box" v-for="item in evenList" :key="item.proid">
          <van-image class="img" :src="item.img1" >
            <template v-slot:error>加载失败</template>
          </van-image>
          <p class="van-multi-ellipsis--l2 pname">{{ item.proname}}</p>
          <p>¥{{item.originprice}}</p>
          <van-button type="primary" @click="addCart(item.proid)">加入购物车</van-button>
        </li>
      </ul>
    </div>
  </van-list>
  <MyTop :size="60" name="home-o" color="red" bgcolor="yellow" />
</template>

<script>
import { Toast } from 'vant';
import MyTop from './MyTop.vue'

export default {
  components:{MyTop},
  data() {
    return {
      loading:false,//当前是否在发送请求。
      finished:false,//所有的数据请求完毕
      goodslist:[],
      count:1,
      limitNum:10
    }
  },
  computed:{
    // （左侧列）奇数列的数据
    oddList:function(){
      return this.goodslist.filter((item,index)=>index%2==0);
    },
    // （右侧列）偶数列的数据
    evenList:function(){
      return this.goodslist.filter((item,index)=>index%2==1);
    }
  },
  created(){
    this.getImgs();
  },
  methods:{
    addCart(proid){
      this.$http({
        method:"post",
        url:"/cart/add",
        data:{
          userid:sessionStorage.getItem("userid"),
          proid:proid,
          num:1
        }
      })
      .then(res=>{
        if(res.data.code==="200"){
          Toast("添加成功！")
        }
      })
    },
    onLoad(){
      console.log("onLoad");
      if(this.loading || this.finished){//如果正在加载数据，或者数据已经全部拿到。那么，就不应该发送请求。
        return;
      }
      console.log("发送请求");
      this.count++;
      this.getImgs();          
    },
    // 获取当前页码的商品。
    getImgs(){
      console.log(`请求第${this.count}页数据`);
      this.loading = true;
      this.$http.get("/pro/list",{
        params:{
          count:this.count,
          limitNum:this.limitNum
        }
      })
      .then(res=>{
        // res:是后端响应回来后的所有信息（如：data是响应的数据，content-type：内容类型………………）
        // res.data:就是后端响应回来的数据
        if(res.data.code==="200"){
          if(res.data.data.length==0){//后端没有数据了
            this.finished = true;
            return;
          }
          this.goodslist.push(...res.data.data);//此处改变了数据，但是，不能保证渲染完毕（不能保证dom已经渲染到页面上，而vue框架渲染dom是异步更新队列（即：数据改变后，并不会理解渲染dom））
          // this.$nextTick(callback); 当数据修改后，想在数据影响的dom渲染后，做事情，就需要使用this.$nextTick() ，把想做的事情以回调函数的方式传给$nextTick;
          this.$nextTick(()=>{
            console.log("回调函数被调用了，渲染到页面上了");
            // 商品列表已经渲染到页面上了
            this.loading = false;
          })
        }
      })
    }
  }

}
</script>

<style scoped>

.list-box{
  display: flex;
  justify-content: space-around;
}

.left-box,.right-box{
  width: 45%;
}

.left-box .img,.right-box .img{
  width: 100%;
  min-height: 100px;
}

.goods-box{
  border:1px solid #b6b6b6;
  border-radius: .625rem;
  margin-top: 20px ;
}

.pname{
  font-size: 14px;
  line-height: 20px;
}


/deep/ .van-image img{
  border:1px solid black;
}


</style>